﻿<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="CurrData.Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>Index </title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />

    <link href="/js/kd/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="/js/kd/styles/kendo.blueopal.min.css" rel="stylesheet" />
    <link href="/js/fa/css/font-awesome.min.css" rel="stylesheet" />
    <link href="/js/site.css?t=20221031" rel="stylesheet" />

    <script src="/js/kd/jquery.min.js"></script>
    <script src="/js/kd/kendo.web.min.js"></script>

    <script src="/js/kd/cultures/kendo.culture.zh-CN.min.js"></script>
    <script src="/js/kd/messages/kendo.messages.zh-CN.min.js"></script>
    <script src="/js/kd/jszip.min.js"></script>


    <script src="/js/kendo_stdefine.js"></script>
    <script src="/js/site50.js"></script>
    <script src="/js/xlsx.full.min.js?t=1"></script>


</head>
<body>

    <div id="divSplitter" data-role="splitter"
         data-panes="[
                { collapsible: false, resizable: false },
                { collapsible: false, resizable: false,  size: '50px' }
             ]"
         data-orientation="vertical"
         >

        <div id="center" style="overflow:hidden;padding-top:0px;overflow-y: auto;">

            <form id="form1">
                <div style="height:10px;"></div>
                <div class="flexrow">
                    <div class="tdLabel75 Required">采集器名称</div>
                    <div class="tdValue">
                        <input class="k-textbox" required  id="Name" name="Name"
                               data-bind="value:m.Name"
                               placeholder="采集器名称" />
                    </div>
                    <div style="width:20px;"></div>
                </div>

                <div class="flexrow">
                    <div class="tdLabel75  Required">协议名称</div>
                    <div class="tdValue">
                        <input id="ProtocolDefineId"  name="ProtocolDefineId" required
                               data-role="dropdownlist"
                               data-value-primitive="true"
                               data-text-field="Name"
                               data-value-field="Id"
                               data-autoBind="true"
                               data-height="300"
                               data-bind="source:ProtocolDs,value:m.ProtocolDefineId,events:{change:ProtocolDefineId_Change}" />
                    </div>
                    <div style="width:20px;"></div>
                </div>

                <div class="flexrow">
                    <div class="tdLabel75  Required">采集方式</div>
                    <div class="tdValue">
                        <input id="Mode" data-role="dropdownlist"
                               data-value-primitive="true"
                               data-text-field="Name"
                               data-value-field="Name"
                               data-autoBind="true"
                               data-height="300"
                               data-bind="source:ModeDs,value:m.Mode,events:{change:Mode_Chnge}" />
                    </div>
                    <div style="width:20px;"></div>
                </div>

                <div id="divCK">
                    <!-- 新增串口配置部分 -->
                    <div class="flexrow">
                        <div class="tdLabel75">串口选择</div>
                        <div class="tdValue">

                            <input id="ComPort" data-role="dropdownlist"
                                   data-value-primitive="true"
                                   data-text-field="Name"
                                   data-value-field="Name"
                                   data-autoBind="true"
                                   data-height="300"
                                   data-bind="source:ComPortDs,value:m.ComPort " />

                        </div>
                        <div style="width:20px;"></div>
                    </div>

                    <div class="flexrow">
                        <div class="tdLabel75">波特率</div>
                        <div class="tdValue">

                            <input id="BaudRate" data-role="dropdownlist"
                                   data-value-primitive="true"
                                   data-text-field="Name"
                                   data-value-field="Name"
                                   data-autoBind="true"
                                   data-height="300"
                                   data-bind="source:BaudRateDs,value:m.BaudRate " />

                        </div>
                        <div style="width:20px;"></div>
                    </div>

                    <div class="flexrow">
                        <div class="tdLabel75">校验方式</div>
                        <div class="tdValue">

                            <input id="Parity" data-role="dropdownlist"
                                   data-value-primitive="true"
                                   data-text-field="Name"
                                   data-value-field="Name"
                                   data-autoBind="true"
                                   data-height="300"
                                   data-bind="source:ParityDs,value:m.Parity " />

                        </div>
                        <div style="width:20px;"></div>
                    </div>

                    <div class="flexrow">
                        <div class="tdLabel75">数据位</div>
                        <div class="tdValue">

                            <input id="DataBits" style="width:150px;"
                                   data-role="numerictextbox"
                                   data-min="0"
                                   data-max="255"
                                   data-format="N0"
                                   data-bind="value:m.DataBits" />

                        </div>
                        <div style="width:20px;"></div>
                    </div>

                    <div class="flexrow">
                        <div class="tdLabel75">停止位</div>
                        <div class="tdValue">

                            <input id="StopBits" data-role="dropdownlist"
                                   data-value-primitive="true"
                                   data-text-field="Name"
                                   data-value-field="Name"
                                   data-autoBind="true"
                                   data-height="300"
                                   data-bind="source:StopBitsDs,value:m.StopBits " />

                        </div>
                        <div style="width:20px;"></div>
                    </div>
                    <!-- 结束串口配置部分 -->
                </div>

                <div id="divIP">

                 
                    <div class="flexrow">
                        <div class="tdLabel75">IP</div>
                        <div class="tdValue">
                            <input class="k-textbox"   id="IP" name="IP"
                                   data-bind="value:m.IP"
                                   placeholder="IP地址" />
                        </div>
                        <div style="width:20px;"></div>
                    </div>


                    <div class="flexrow">
                        <div class="tdLabel75">端口</div>
                        <div class="tdValue">
                            <input id="Port" style="width:150px;"
                                   data-role="numerictextbox"
                                   data-min="0"
                                   data-max="65555"
                                   data-format="N0"
                                   data-bind="value:m.Port" />
                        </div>
                        <div style="width:20px;"></div>
                    </div>
                </div>


                <div class="flexrow" data-bind="visible:IsAdd">
                    <div class="tdLabel75">主机号</div>
                    <div class="tdValue">

                        <input id="HostId" style="width:150px;"
                               data-role="numerictextbox"
                               data-min="1"
                               data-max="255"
                               data-format="N0"
                               data-bind="value:m.HostId" />

                    </div>
                    <div style="width:20px;"></div>
                </div>


            </form>

            <div style="height:10px;"></div>
            

        </div>

        <div id="bottom" class="flexrow" style="  ">

            <div style="flex:1;">


            </div>
            <div style="width:100px;" >
                <a href="javascript:btnOKonClick();" class="k-button" style="width:80px; " accesskey="S">
                    
                    <i class="fa fa-save"></i>
                    <span style="text-decoration:underline;margin-left:5px;">S</span>
                    确定
                </a>
            </div>
            <div style="width:80px;">
                <a href="javascript:myWindowClose();" class="k-button" style="width: 80px;  " accesskey="C">
                    <i class="fa fa-close"></i>
                    <span style="text-decoration: underline; margin-left: 5px;">C</span>
                    取消

                </a>
            </div>
            <div style="width:20px;"></div>
           
        </div>

    </div>



        <script>
            var IsAdd = false;
            var viewModel = new kendo.data.ObservableObject({
                ModeDs: [
                    { Name: "TCP" },
                    { Name: "UDP" },
                    { Name: "串口" },
                ],
                ComPortDs: [
                    { Name: "COM1" },
                    { Name: "COM2" },
                    { Name: "COM3" },
                    { Name: "COM4" },
                    { Name: "COM5" },
                    { Name: "COM6" },
                    { Name: "COM7" },
                    { Name: "COM8" },
                    { Name: "COM9" },
                    { Name: "COM10" },
                    { Name: "COM11" },
                    { Name: "COM12" },
                    { Name: "COM13" },
                    { Name: "COM14" },
                    { Name: "COM15" },
                    { Name: "COM16" },
                    { Name: "COM17" },
                    { Name: "COM18" },
                    { Name: "COM19" },
                    { Name: "COM20" },
                    { Name: "COM21" },
                    { Name: "COM22" },
                    { Name: "COM23" },
                    { Name: "COM24" },
                    { Name: "COM25" },
                    { Name: "COM26" },
                    { Name: "COM27" },
                    { Name: "COM28" },
                    { Name: "COM29" },
                    { Name: "COM30" },
                    { Name: "COM31" },
                    { Name: "COM32" },
                    { Name: "COM33" },
                    { Name: "COM34" },
                    { Name: "COM35" },
                    { Name: "COM36" },
                    { Name: "COM37" },
                    { Name: "COM38" },
                    { Name: "COM39" },
                    { Name: "COM40" }
                ],
                BaudRateDs: [
                    { Name: "110" },
                    { Name: "300" },
                    { Name: "600" },
                    { Name: "1200" },
                    { Name: "2400" },
                    { Name: "4800" },
                    { Name: "9600" },
                    { Name: "14400" },
                    { Name: "19200" },
                    { Name: "38400" },
                    { Name: "57600" },
                    { Name: "115200" },
                    { Name: "128000" },
                    { Name: "256000" }

                ],
                ParityDs: [
                    { Name: "None" },
                    { Name: "Odd" },
                    { Name: "Even" },
                    { Name: "Mark" },
                    { Name: "Space" }
                ],
                StopBitsDs: [
                    { Name: "One" },
                    { Name: "OnePointFive" },
                    { Name: "Two" }
                ],
                Mode_Chnge: function () {
                    var Mode = viewModel.m.Mode;

                    var IsIP = Mode == "TCP" || Mode == "UDP";

                    if (IsIP) {
                        $("#divIP").show();
                        $("#divCK").hide();
                    } else {
                        $("#divIP").hide();
                        $("#divCK").show();
                    }


                },

                m: {
                    Id: "0",
                    Name: "",
                    ShortName: "",
                    Memo: "",
                },
                ProtocolDs: [],
                ProtocolDefineId_Change: function () {
                    var ProtocolDefineId = $("#ProtocolDefineId").data("kendoDropDownList").value();
                    myAjax({
                        url: "/api/ProtocolDefine/Detail",
                        data: { Id: ProtocolDefineId },
                        success: function (r) {
                            var data = r.Data.ZSBCS;
                            for (var i = 0; i < data.length; i++) {
                                data[i].Value = 0;
                            }
                            var dsoptions = {
                                schema: {
                                    model: {
                                        id: "Id",
                                        fields: {
                                            Id: { editable: false, nullable: true },
                                            Value: { editable: true, nullable: false, type: "number" }
                                        },
                                        
                                    }
                                },
                                data: r.Data.ZSBCS,
                            };
                            var gridDataSource = new kendo.data.DataSource(dsoptions);
                            grid.setDataSource(gridDataSource);
                            gridDataSource.read();
                        }
                    });
                }
            });
            var grid;
            function ListXY() {
                myAjax({
                    url: "/api/ProtocolDefine/List",
                    success: function (r) {

                        viewModel.set("ProtocolDs", r.Data);
                    }
                })
            }

            function Init() {
                $("#form1").kendoValidator(kendoValidatorOptions)
                ListXY();
                kendo.bind($("#divSplitter"), viewModel); 

                var opt = Object.assign({}, gridBaseOption);
                opt.editable = true;
                opt.columns = [
                    
                    {
                        title: '参数名称', field: "Name", width: 100, sortable: false, filterable: false,
                        editable: () => { return false; }

                    },
                    {
                        title: '参数值', field: "Value", width: 100, sortable: false, filterable: false,
                        editable: (row) => {
                            return true;
                        } 
                    },

                     

                ]
                grid = $("#grid").kendoGrid(opt).data("kendoGrid");

            }
            function btnOKonClick() {

                var v = $("#form1").data("kendoValidator");
                if (v.validate() == false) return;

                
                var IsIP = Mode == "TCP" || Mode == "UDP";

                if (IsIP) {
                    if (!viewModel.m.IP || !viewModel.m.Port) {
                        myAlert("IP 端口必须输入");
                        return;
                    }
                } else {
                     
                }

                onOk(viewModel.m.toJSON() );
            }
            function setData(data) {
                viewModel.set("m", data.m);
                viewModel.Mode_Chnge();
            }

        </script>
        <script>
            var SizeInfo;
            $(function () {

                kendo.culture("zh-CN");


                if (window.Init) {
                    Init();
                }
            });
            function After50(d) {
                if (d) {
                    setTimeout(function () { d(); }, 50);
                }
            }
        </script>
</body>
</html>
